import React from 'react'
import {Row,Col,Card} from 'antd'
import './index.less'
import { useEffect,useRef } from 'react'
// import * as echarts from 'echarts';
import {init} from 'echarts'
import line from './options/line'
import pie from './options/pie'
import bar from './options/bar'
import { countGet } from '../../api/other'
export default function DashBoard() {
  const lineRef = useRef()
  const pieRef = useRef()
  const barRef = useRef()
  useEffect(()=>{
    //初始化线状图
    var lineChart = init(lineRef.current);  //基于准备好的dom，初始化echarts实例
    lineChart.setOption(line);       //绘制图表

    //初始化饼状图
    (async()=>{
      var pieChart = init(pieRef.current);  //基于准备好的dom，初始化echarts实例
      let res1 = await countGet('632177e926acc7403de97525') //统计正念冥想
      let res2 = await countGet('6321780326acc7403de97558') //统计睡眠助手
      console.log(res1,res2);
      pie.series[0].data[0].value = res1.data.count
      pie.series[0].data[1].value = res2.data.count
      pieChart.setOption(pie);       //绘制图表
    })()

    //初始化柱状图
    var barChart = init(barRef.current);  //基于准备好的dom，初始化echarts实例
    barChart.setOption(bar);       //绘制图表
  },[])
  return (
    <div>
      <Row>
        <Col span={24}>
          <Card>
            <div className='chart' ref={lineRef}></div>
          </Card>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <Card>
            <div className='chart' ref={pieRef}></div>
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <div className='chart' ref={barRef}></div>
          </Card>
        </Col>
      </Row>
    </div>
  )
}
